<template>
  <div class="product">
    <div style="position: relative; height: 500px" class="header">
      <div>
        <el-carousel indicator-position="none" arrow="never" height="500px">
          <el-carousel-item v-for="item in bannerList" :key="item">
            <div>
              <img
                style="width: 100%; height: 500px"
                class="bg-cover bg-no-repeat"
                :src="item.article_share"
                alt="Element logo"
              />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="carousel-mask fadeInUp animated">
        <h1 class="text-3xl mb-6">{{ dataSingle[fieldA] }}</h1>
        <p style="color: #545454; line-height: 24px; font-size: 14px">
          {{ dataSingle[fieldB] }}
        </p>
      </div>
    </div>
    <div class="context px-32 pt-4">
      <div class="m-left">
        <div
          class="contact text-white text-3xl font-medium"
          style="padding-left: 28px"
        >
          {{ znEn[fieldA] }}
        </div>
        <div class="menu">
          <el-menu
            :default-active="String(articleId)"
            active-text-color="#008000"
            class="el-menu-vertical-demo"
            @select="changeId"
          >
            <el-menu-item
              v-for="item in menuList"
              :key="item"
              :index="String(item.article_id)"
            >
              <div style="width: 30px; height: 30px">
                <img
                  :src="item.article_label"
                  style="width: 100%; height: 100%"
                />
              </div>
              <span class="text1 ml-2">{{ item[fieldA] }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="m-right">
        <router-view> </router-view>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, provide, inject, watch } from "vue";
import product from "@/api/product.js";
const allfield = inject("allfield");
const { fieldA, fieldB } = allfield();
const menuList = ref([]);
const bannerList = ref([]);
const listAll = ref([]);
const articleId = ref(null);
const total = ref(0);
const page = ref(1);
const router = useRouter();
const route = useRoute();
const dataSingle = ref({});
const znEn = ref({
  nameit: "产品中心",
  ext_field3: "product",
});
const productAll = async () => {
  const res = await product.productAll();
  const { banner, dc4 } = res;
  menuList.value = dc4;
  bannerList.value = banner;
  articleId.value = route.query.id || dc4[0].article_id;

  let data = dc4.find((item) => item.article_id == articleId.value);
  banner[0].article_share = data.article_share;
  listAll.value = data.list;
  total.value = data.total;
  page.value = 1;
  dataSingle.value = data;
};
const changeId = (id) => {
  router.push(`/product?id=${id}`);
};
onMounted(() => {
  productAll();
});
watch(
  () => route.params,
  (newPath, oldPath) => {
    productAll();
  }
);
provide("listAll", listAll);
provide("articleId", articleId);
provide("total", total);
provide("page", page);
</script>
<style scoped lang="scss">
.carousel-mask {
  z-index: 2;
  width: 672px;
  // height: 244px;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  padding: 40px;
  top: 112px;
  left: 400px;
}
::v-deep .el-menu-item:hover,
::v-deep .is-active {
  background-color: #15397b;
  color: #fff !important;
}
.product {
  .context {
    background-color: #eeeeee;
    height: 1000px;
    display: flex;
    .m-left {
      height: 860px;
      width: 250px;
      margin-right: 20px;
      background-color: #ffffff;
      .menu {
        .text1 {
          font-size: 18px;
        }
        height: calc(100% - 280px);
      }
      .contact {
        height: 90px;
        line-height: 90px;
        background-color: #15397b;
      }
    }
    .m-right {
      flex: 1;
    }
  }
}
</style>
<style>
.el-menu-item {
  height: 70px;
}
.el-menu {
  border: none;
}
.product .context .m-left .menu .text1 {
  overflow: hidden;
}
</style>
